<template>
  <div class="life-container">
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in lifeList"
        :key="index"
        :timestamp="item.date"
        placement="top"
      >
        <el-card>
          <h4>{{ item.title }}</h4>
          <el-image 
            v-if="item.image"
            :src="item.image" 
            :preview-src-list="[item.image]"
            class="life-image"
          ></el-image>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'LifeView',
  data() {
    return {
      lifeList: [
        {
          date: '2024-01-20',
          title: '示例生活记录',
          content: '这是一条生活记录的示例内容...',
          image: ''
        }
      ]
    }
  }
}
</script>

<style scoped>
.life-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.life-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  margin: 10px 0;
}
</style> 